<template>
	<!-- 轮播图 --> 
	<swiper class="screen-swiper round-dot" :indicator-dots="true" :circular="true" indicator-color="#fff" v-if="bannerList.length!==0"
	 :autoplay="true" interval="5000" duration="500" indicator-active-color="#D8B36B" :isMargin="isMargin" :class="{'margin': isMargin}"
	 style="box-shadow:0px 4upx 20upx rgba(100,66,0,0.6);">
		<swiper-item class="radius" v-for="(item,index) in bannerList" :key="item.id" @click="webview(item.return_url)">
			<image :src="!item.image?'/static/image/errorImg.svg':item.image" mode="aspectFill" :lazy-load="true" :id="index" @error="imgError"></image>
		</swiper-item>
	</swiper>
</template>

<script>
	import {mapState} from 'vuex'
	
	export default {
		data() {
			return {
			
			}
		},
		props: {
			isMargin: {
				type: Boolean,
				default: false
			}
		},
		methods: {
			webview(url){
				uni.navigateTo({
					url: `/pages/webview/webview?url=${url}`
				})
			},
			// 图片加载失败
			imgError: function (e) {
				let errorImgIndex = e.currentTarget.id
				this.$store.state.bannerList[errorImgIndex].image = '/static/image/errorImg.svg'
			}
		},
		computed: {
			...mapState(['bannerList']),
		}
	}
</script>

<style lang="scss">
	page{
		background-color: $uni-bg-color;
	}
</style>
